<template>
  <!-- 设置密码 -->
  <a-modal :width="500" v-model:visible="showSetPsdDialog" title="重置密码" title-align="start" :mask-closable="false" @cancel="closedDialog" :on-before-ok="submitData">
    <p class="info-title">设置成员码{{ userInfo.userName }}的登录密码</p>
    <a-form ref="userFormRef" :model="userInfo" :rules="rules">
      <a-form-item label="登录账号">
        <p>{{ userInfo.loginName }}</p>
      </a-form-item>
      <a-form-item field="psd" label="新密码">
        <a-input v-model="userInfo.psd" placeholder="输入密码" allow-clear />
      </a-form-item>
      <a-form-item field="psd2" label="确认密码">
        <a-input v-model="userInfo.psd2" placeholder="确认密码" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { updateUserPwd } from '@/api/system'

  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    user: {
      type: Object,
      default: () => {},
    },
  })
  const showSetPsdDialog = ref(props.isShow)
  const userInfo = ref<any>(props.user)
  const loginPwdvalidator = (val: any, callback: any) => {
    if (!val) {
      callback('请填写密码')
    } else if (!val.replace(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/g, '')) {
      callback()
    } else {
      callback('密码格式要求，6位以上包含字母和数字')
    }
  }
  const rules = ref({
    psd: [{ required: true, validator: loginPwdvalidator }],
    psd2: [{ required: true, validator: loginPwdvalidator }],
  })

  const userFormRef = ref()
  // 提交密码
  async function submitData() {
    let valid = await userFormRef.value.validate((valid: any) => {
      return valid
    })
    console.log(valid)
    if (valid) return false
    if (userInfo.value.psd != userInfo.value.psd2) {
      Message.error('2次输入密码不一致')
      return false
    }
    let res: any = await updateUserPwd({
      id: userInfo.value.id,
      loginPwd: userInfo.value.psd,
    })
    if (!res) return false
    Message.success('密码重置成功')
    closedDialog()
    return true
  }
  function closedDialog() {
    showSetPsdDialog.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .info-title {
    font-size: 16px;
    margin-bottom: 20px;
  }
</style>
